import { Form, Input, Select } from "antd";
import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import { resetPageInfo } from "../../../store/pageInfoReducer";

const PageSetting: React.FC = () => {
  const dispatch = useDispatch();
  const pageInfo = useGetPageInfo();
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue(pageInfo);
  }, [pageInfo]);

  function handleValuesChange() {
    dispatch(resetPageInfo(form.getFieldsValue()));
  }

  return (
    <Form
      layout="vertical"
      initialValues={pageInfo}
      form={form}
      onValuesChange={handleValuesChange}
    >
      <Form.Item
        label="问卷标题"
        name="title"
        rules={[{ required: true, message: "请输入问卷标题" }]}
      >
        <Input disabled />
      </Form.Item>
      <Form.Item label="问卷描述" name="desc">
        <Input.TextArea
          autoSize={{ minRows: 5, maxRows: 8 }}
          disabled={pageInfo.isPublished}
          allowClear
        />
      </Form.Item>
      <Form.Item label="是否提示答案" name="isPrompt">
        <Select
          options={[
            {
              label: "否",
              value: false,
            },
            {
              label: "是",
              value: true,
            },
          ]}
          disabled={pageInfo.isPublished}
        />
      </Form.Item>
    </Form>
  );
};

export default PageSetting;
